<template>
	<!-- 活动-多图显示组件 -->
	<view class="imageRowThreeComponent">
		<view class="image_list" :style="[{'marginTop': `${newData.pageUpspacing}rpx`,'marginBottom': `${newData.pageDownspacing}rpx`,'background': `url(${newData.backgroundImg}) no-repeat`, 'paddingLeft': `${newData.lrSpace}rpx`,
	    'paddingRight': `${newData.lrSpace }rpx`,height: `${newData.bgcHeight}rpx`,paddingTop: `${newData.imgUpspacing }rpx`}]">
			<view class="image-item" v-for="item in newData.imgs" :key="item.id"
				:style="[{'marginRight': `${newData.imgSpace}rpx`}]">
				<div-base-navigator :pageUrl="item.pageUrl" style="width: 100%;">
					<view class="imgItem" :style="[{'height':`${newData.height}rpx`}]">
						<image :src="item.imageUrl" class="image" mode=""
							:style="[{'height':`${item.imgHeight}%`,'width': `${item.imgWidth}%`}]">
						</image>
					</view>
				</div-base-navigator>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import divBaseNavigator from '../div-base/div-base-navigator.vue'
	export default {
		name: 'div-image-rowThree',
		props: {
			value: {
				type: Object,
				default: function() {
					return {
						rowNum: 3,
						height: 200,
						imgSpace: 0,
						pageUpspacing: 0,
						pageDownspacing: 0,
						imgs: [{
							id: Math.random(),
							imageUrl: '',
							imgHeight: 100,
							imgWidth: 100,
							pageUrl: ''
						}, {
							id: Math.random(),
							imageUrl: '',
							imgHeight: 100,
							imgWidth: 100,
							pageUrl: ''
						}, {
							id: Math.random(),
							imageUrl: '',
							imgHeight: 100,
							imgWidth: 100,
							pageUrl: '',

						}]
					}
				}
			}
		},
		components: {
			divBaseNavigator
		},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value
			};
		},
		mounted() {
			// console.log(this.value)
		},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.image_list {
		display: flex;
		align-items: flex-start;
		// margin: 0 20rpx;
		background-size:100% 100%!important;
		.image-item {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.imgItem {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
			}
		}

	}
</style>
